<template>
  <view>
    <view class="wrap">
      <view class="item" v-for="(item,index) in list" :key="index">
        <view class="title">第{{item.num}}期</view>
        <view class="content">
          <view class="content-item">
            <view class="l">租金到期日</view>
            <view class="r">{{item.dead_line ? formatTime(item.dead_line) : ''}}</view>
          </view>
          <view class="content-item">
            <view class="l">应付租金</view>
            <view class="r">{{item.amount}}</view>
          </view>
          <view class="content-item">
            <view class="l">已付日期</view>
            <view class="r">{{item.pay_time?formatTime(item.pay_time):''}}</view>
          </view>
          <view class="content-item">
            <view class="l">已付金额</view>
            <view class="r">{{item.amount_paid}}</view>
          </view>
          <view class="content-item">
            <view class="l">支付方式</view>
            <view class="r">
              <text v-if="item.pay_type=='zhima'">预授权代扣</text>
              <text v-else-if="item.pay_type=='offline'">线下收款</text>
              <text v-else-if="item.pay_type=='zlb'">智能合同代扣</text>
              <text v-else>{{ item.pay_type }}</text>
            </view>
          </view>
          <view class="content-item">
            <view class="l">支付状态</view>
            <view class="r">
              <text v-if="item.status==0" style="color:#666;">待支付</text>
              <text v-if="item.status==1" style="color:rgb(140, 230, 176);;">已支付</text>
              <text v-if="item.status==2" style="color:rgb(255, 0, 0);;">已逾期</text>
              <text v-if="item.status==3" style="color:rgb(140, 230, 176);;">已完成</text>
            </view>
          </view>
          <view class="content-item other">
            <text class="mr-12">线下已收（{{ item.offline_payment }}）</text>
            <text class="mr-12">减免金额（{{ item.reduced_price }}）</text>
            <view class="edit-box">
              <view class="btn" @click="openModal('remark',item)">
               设置备注
              </view>
            </view>
          </view>
          <view class="content-item remark">
            <view class="l">备注内容</view>
            <view class="r">{{item.remark}}</view>
          </view>
          <view class="btn-box">
<!--            已支付，并且线下收款金额大于0，则显示线下收款按钮-->
            <view v-if="item.status==1 && parseFloat(item.offline_payment)>0"  @click="openModal(1,item)" class="btn-color green">
              线下收款
            </view>
            <view v-if="item.status==0 || item.status==2" @click="openModal(1,item)" class="btn-color">
              线下收款
            </view>
            <view v-if="item.status==0 || item.status==2" @click="openModal(2,item)" class="btn-color">
              减免金额
            </view>
            <view v-if="item.status==0 || item.status==2" @click="openModal(3,item)" class="btn-color">
              标记完成
            </view>
            <view v-if="item.status==0 || item.status==2" @click="openModal('withhold',item)" class="btn-color">
              额度扣款
            </view>
            <view v-if="(item.status==0 || item.status==2) && nowItem.order_lease.check_type == 2" @click="openModal('cancel',item)" class="btn-color">
              取消代扣
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popModel" type="center"
                 :maskClick="false"
                 border-radius="10px 10px 0 0">
<!--      线下收款-->
      <view class="pop-box" v-if="type===1">
        <view class="main">
          <view class="title">收款记录</view>
          <view class="content">
            <view class="item" v-for="(item,index) in xianxiaList" :key="index">
              <view class="item-con">
                <view class="l">收款时间</view>
                <view class="r">{{ item.add_time }}</view>
              </view>
              <view class="item-con">
                <view class="l">收款金额</view>
                <view class="r">{{ item.money }}</view>
              </view>
              <view class="item-con">
                <view class="l">收款方式</view>
                <view class="r">{{ item.offline_pay_type }}</view>
              </view>
              <view class="item-con">
                <view class="l">收款类型</view>
                <view class="r">{{ item.offline_money_type }}</view>
              </view>
              <view class="item-con">
                <view class="l">累计收款</view>
                <view class="r">{{ item.total_money }}</view>
              </view>
              <view class="item-con">
                <view class="l">收款门店</view>
                <view class="r">{{ item.store.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="add-box" v-if="leaseItem.status==0||leaseItem.status==2">
          <view class="item">
            <view class="l">收款金额</view>
            <view class="r">
              <input v-model="moneyValue" placeholder="请输入"/>
            </view>
          </view>
          <view class="item">
            <view class="l">收款方式</view>
            <view class="r">
              <uni-data-select
                  v-model="model"
                  :localdata="payType"
                  placement="top"
              ></uni-data-select>
            </view>
          </view>
          <view class="item">
            <view class="l">收款类型</view>
            <view class="r">
              <uni-data-select
                  v-model="recordModel"
                  :localdata="recordType"
                  placement="top"
              ></uni-data-select>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="addXianXia" v-if="leaseItem.status==0||leaseItem.status==2">添加</view>
        </view>
      </view>
<!--      减免金额-->
      <view class="pop-box" v-if="type===2">
        <view class="main">
          <view class="title">金额减免</view>
          <input v-model="value" style="width: 100%;" placeholder="请输入"/>
          <view class="tip">请输入需要减免的金额</view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="moneySub">确定</view>
        </view>
      </view>
<!--      标记完成-->
      <view class="pop-box" v-if="type===3">
        <view class="main">
          <view class="title">提示</view>
          <view class="txt">确认设置第{{leaseItem.num}}期完成?</view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="complete">确定</view>
        </view>
      </view>
<!--      额度扣款-->
      <view class="pop-box" v-if="type==='withhold'">
        <view class="main">
          <view class="title">提示</view>
          <view class="txt">确认扣款第{{leaseItem.num}}期?</view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="setWithholdPay(leaseItem.num)">确定</view>
        </view>
      </view>
<!--      取消代扣-->
      <view class="pop-box" v-if="type==='cancel'">
        <view class="main">
          <view class="title">提示</view>
          <view class="txt">确认取消第{{leaseItem.num}}期代扣?</view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="setCancelAtoWithhold(leaseItem.num)">确定</view>
        </view>
      </view>
<!--      备注-->
      <view class="pop-box" v-if="type==='remark'">
        <view class="main">
          <view class="title">备注</view>
          <textarea v-model="remark" maxlength="999" placeholder="请输入"
                    style="width: 100%;height: 100px;font-size: 28rpx;border: 1rpx solid #ddd;"/>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
          <view class="btn confirm" @click="setRemark()">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// #ifdef MP || APP-PLUS
// import NavBar from "@/components/NavBar.vue";
// #endif
import {
  addLeaseOrderRemark,
  cancelAtoWithhold, getAdminOrderDetail, getAdminRefundDetail,
  getRentList, getStoreOrderDetail, getStoreRefundDetail,
  moneyRecordList,
  updateLeasePhaseMoney,
  withholdPay
} from "../../../api/admin";
import {LOGINTYPE} from "../../../config/cache";
import {formatTime} from "../../../utils/order";
import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
export default {
  components:{
    UniPopup,
    // NavBar
  },
  data() {
    return {
      remark:'',
      // 账单id
      leaseId:'',
      // 账单对象
      leaseItem:{},
      value: '',
      moneyValue:'',
      // 线下收款支付类型
      model: 1,
      payType: [
        { value: 1, text: "企业微信" },
        { value: 2, text: "企业支付宝" },
      ],
      // 线下收款类型
      recordModel: 1,
      recordType: [
        { value: 1, text: "租金" },
        { value: 2, text: "违约金" },
      ],


      iconColor: '#333333',
      isScrolling: false,
      getHeight: this.$util.getWXStatusHeight(),
      list:[],
      nowItem:{},
      type:1,
      xianxiaList:[],
      statusType:'',
      order_id:''

    }
  },
  onLoad(options){
    if(options.order_id){
      this.statusType=options.statusType
      this.order_id=options.order_id
      this.getIndex()
    }
  },
  mounted(){
    // this.$refs.popModel.open()
  },
  methods:{
    formatTime,
    getIndex: function() {
      let that = this;
      let obj = '';
      if (that.statusType == -3) {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminRefundDetail(that.order_id);
        }else{
          funApi = getStoreRefundDetail(that.order_id);
        }
        obj = funApi;
      } else {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminOrderDetail(that.order_id);
        }else{
          funApi = getStoreOrderDetail(that.order_id);
        }
        obj = funApi;
      }
      uni.showLoading({
        title: '加载中',
      })
      obj.then(res => {
        uni.hideLoading()
        that.nowItem = res.data;
        this.getRentList()
      })
    },
    close(){
      this.$refs.popModel.close()
      this.getRentList()
    },
    getRentList(){
      getRentList(this.nowItem.id).then(res=>{
        this.list = res.data
      })
    },
    openModal(type,item){
      this.type=type
      this.leaseId=item.id
      this.leaseItem=item
      this.$refs.popModel.open()
      if (type == 1) {
        this.getRecordList()
      } else if (type == 2) {

      }
    },
    // 线下收款记录
    getRecordList() {
      moneyRecordList(this.nowItem.id, { lease_id:this.leaseId, type:this.type}).then((res) => {
        this.xianxiaList = res.data;
        console.log(this.xianxiaList, "线下支付列表");
        this.reset();
      });
    },
    // 新增线下记录
    addXianXia(){
      updateLeasePhaseMoney(this.nowItem.id, {
        money: this.moneyValue.toString(),
        lease_id: this.leaseId,
        type: this.type,
        offline_pay_type: this.model,
        offline_money_type: this.recordModel,
      }).then((res) => {
        this.getRecordList();
        this.moneyValue = '';
        this.$util.Tips({ title: '添加成功' });
      })
    },
    // 金额减免
    moneySub() {
      updateLeasePhaseMoney(this.nowItem.id, {
        money: this.value,
        lease_id: this.leaseId,
        type: this.type,
      }).then((res) => {
        this.close()
        this.$util.Tips({ title: '减免成功' });
      })
    },
    // 标记完成
    complete(){
      updateLeasePhaseMoney(this.nowItem.id, {
        lease_id: this.leaseId,
        type: this.type,
      }).then((res) => {
        this.$util.Tips({ title: '修改完成' });
        this.close()
      })
    },
    // 额度扣款
    setWithholdPay(lease_num){
      withholdPay(this.nowItem.id, { lease_num }).then((res)=>{
        this.close()
        this.$util.Tips({ title: res.msg });
      })
    },
    // 取消代扣
    setCancelAtoWithhold(lease_num) {
      cancelAtoWithhold(this.nowItem.id, { lease_num }).then(()=>{
        this.close()
        this.$util.Tips({ title: '取消代扣成功' });
      })
    },
    // 备注
    setRemark(){
      addLeaseOrderRemark(this.nowItem.id, { remark: this.remark, lease_id:this.leaseId }).then(() => {
        this.close()
        this.$util.Tips({ title: '备注成功' });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding: 20rpx;
  .item{
    background:#fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    .title{
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .content{
      .content-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        &:last-child{
          margin-bottom: 0;
        }
        .l{
          white-space: nowrap;
          padding-right: 20rpx;
        }
      }
      .btn-box{
        display: flex;
        flex-wrap: wrap;
      }
      .other{
        border-top: 1rpx solid #ddd;
        padding-top: 12rpx;
        color: #999;
      }
      .remark{
        color: #999;
      }
    }
  }
}
.btn-color{
  white-space: nowrap;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 54rpx;
  text-align: center;
  border-radius: 28rpx;
  font-size: 24rpx;
  color: #fff;
  transform: rotateZ(360deg);
  background: #1497fa;
  margin-right: 20rpx;
  margin-top: 16rpx;
}
.green{
  background: #19be6b;
}
.pop-box{
  width: 90vw;
  max-height: 80vh;
  padding: 30rpx;
  border-radius: 28rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  .main{
    flex-direction: column;
    display: flex;
    flex: 1;
    overflow: hidden;
    .tip{
      color: #999;
      margin-top: 10rpx;
    }
  }
  .title{
    font-size: 30rpx;
    margin-bottom: 30rpx;
    font-weight: bold;
  }
  .content{
    flex: 1;
    overflow-y: auto;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    .item{
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #ddd;;
      padding: 10rpx;
      &:last-child{
        border-bottom: none;
      }
    }
    .item-con{
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      &:last-child{
        margin-bottom: 0 !important;
      }
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
        padding-right: 30rpx;
      }
    }
  }
  .add-box{
    margin-top: 20rpx;
    .item{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
      }
    }
  }
  .footer{
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    .btn{
      padding: 0 50rpx;
      line-height: 60rpx;
      border-radius: 28rpx;
    }
    .cancel{
      color: #333;
      border: 1rpx solid #CCCCCC;
      margin-right: 30rpx;
    }
    .confirm{
      color: #fff;
      background: #1497fa;
    }
  }
}
input{
  font-size: 28rpx;
  border: 1rpx solid #ddd;
  width: 100%;
  height: 60rpx;
  box-sizing: border-box;
}
textarea{
  box-sizing: border-box;
}
.edit-box{
  display: flex;
  justify-content: flex-end;
  .btn{
    width: 144rpx;
    height: 50rpx;
    border: 1rpx solid #CCCCCC;
    line-height: 50rpx;
    text-align: center;
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #333333;
    transform: rotateZ(360deg);
  }
}
</style>